<template>
	<!-- 中间音乐区 -->
	<div class='musicArea'>
		<!-- title区 -->
		<div class='titleDiv'>
			<img class='coverImg' src="../资源/头像.png" />
			<h1 class='title'>歌单-标题</h1>
			<!-- 用户头像这一行 -->
			<div class='userInfo'>
				<img class='userAvatar' src="../资源/头像.png" />
				<label class='userLabel'>用户名称</label>
				<label class='userLabel'>添加标签</label>
			</div>
			<div class='userDsc'>歌单描述...</div>
			<!-- 四个按钮 -->
			<div class='btnsGrout'>
				<div class='BtnsDivFocus'>播放全部</div>
				<div class='BtnsDiv'>下载</div>
				<div class='BtnsDiv'>批量操作</div>
				<div class='BtnsDiv'>分享</div>
			</div>
		</div>

		<!-- 歌曲列表 -->
		<musiclist />

	</div>
</template>

<script>
import musiclist from './musiclist.vue'
export default {

	data() {
		return {

		}
	},
	components: { musiclist }
}
</script>

<style scoped>
/*中间音乐区*/
.musicArea {
	width: 100%;
	height: 570px;
	background: #fff;
	overflow: hidden;
}

/* title区 */
.titleDiv {
	height: 170px;
	margin: 30px 40px;
	background: #fff;
	position: relative;
	padding-left: 200px;
}

.titleDiv img.coverImg {
	display: block;
	width: 170px;
	height: 170px;
	border-radius: 10px;
	position: absolute;
	left: 0;
	top: 0;
}

.titleDiv h1.title {
	font-size: 26px;
	font-weight: bold;
}

.titleDiv img.userAvatar {
	width: 25px;
	height: 25px;
	border-radius: 100%;
}

.titleDiv .userInfo {
	height: 25px;
	line-height: 25px;
	margin: 15px 0;
}

.titleDiv .userInfo label.userLabel {
	margin-left: 15px;
}

/* .titleDiv .userDsc{} */

/* 通用的按钮组件，先放这 */
div.btnsGrout {
	position: absolute;
	bottom: 10px;
	right: 31;
}

div.BtnsDiv {
	float: left;
	width: 110px;
	height: 30px;
	background: #ddd;
	margin: 0 15px 0 0;
	text-align: center;
	line-height: 30px;
	border-radius: 20px;
}

div.BtnsDiv:hover {
	cursor: pointer;
	background: #d2d0d0;
}

/* 开发中，在项目未完成、定型时，有一些代码冗余，
是可以的，也是必要的。你要给自己留出开发的余量 */
div.BtnsDivFocus {
	float: left;
	width: 110px;
	height: 30px;
	background: #1ed0a1;
	margin: 0 15px 0 0;
	text-align: center;
	line-height: 30px;
	border-radius: 20px;
	color: #fff;
}

div.BtnsDivFocus:hover {
	cursor: pointer;
	background: #1eca9c;
}</style>